<template>
	<view style="padding-top:3px;">
		<view v-if="editEnable" class="model-border">
			<view class="title"></view>
			<text class="icon-title">信息录入</text>
		</view>
		<view class="content" @click="">
			<view class="content_text">
				<text>姓名</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.name" :clearable="false" placeholder="请输入姓名" />
		</view>
		<view class="content">
			<view class="content_text">
				<text>性别</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" @click="showGender = true" v-model="display.genderLabel" :clearable="false" placeholder="请选择性别" disabled />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>出生日期</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.birthday" :clearable="false" placeholder="请选择出生日期"
				disabled @click="showBirthday = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>年龄</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.age" :clearable="false" placeholder="请输入年龄" type="number" />
		</view>
		<view class="content" @click="">
			<view class="content_text">证件类型</view>
			<u-input class="content-input" v-model="display.idnoTypeLabel" :clearable="false" placeholder="请选择证件类型" disabled
				@click="showIdnoType = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>证件号码</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.idno" :clearable="false" placeholder="请输入地址" type="number" />
		</view>
		<view class="content">
			<view class="content_text">籍贯</view>
			<u-input class="content-input" v-model="display.nativePlaceLabel" :clearable="false" placeholder="请选择籍贯"
				disabled @click="showNativePlace = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">民族</view>
			<u-input class="content-input" v-model="display.nationLabel" :clearable="false" placeholder="请选择民族" type="number"
				disabled @click="showNation = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">
				<text>成员联系电话</text>
				<text style="color: red;">*</text>
			</view>
			<u-input class="content-input" v-model="form.phone" :clearable="false" placeholder="请输入成员联系电话" type="number" />
		</view>
		<view class="content">
			<view class="content_text">与户主关系</view>
			<u-input class="content-input" v-model="display.relationLabel" :clearable="false" placeholder="请选择与户主关系" type="number"
				disabled @click="showRelation = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">文化程度</view>
			<u-input class="content-input" v-model="display.eduLabel" :clearable="false" placeholder="请选择文化程度" type="number"
				disabled @click="showEdu = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">劳动技能</view>
			<u-input class="content-input" v-model="display.occupationLabel" :clearable="false" placeholder="请选择劳动技能" type="number"
				disabled @click="showOccupation = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">健康状态</view>
			<u-input class="content-input" v-model="display.healthyStatusLabel" :clearable="false" placeholder="请选择健康状态" type="number"
				disabled @click="showHealthyStatus = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">政治面貌</view>
			<u-input class="content-input" v-model="display.politicsoutLookLabel" :clearable="false" placeholder="请选择政治面貌" type="number"
				disabled @click="showPoliticsoutLook = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">是否享受低保</view>
			<u-input class="content-input" v-model="display.isAllowanceLabel" :clearable="false" placeholder="请选择是否享受低保" type="number"
				disabled @click="showIsAllowance = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">是否参加保险</view>
			<u-input class="content-input" v-model="display.isInsuranceLabel" :clearable="false" placeholder="请选择是否参加保险" type="number"
				disabled @click="showIsInsurance = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">是否就业</view>
			<u-input class="content-input" v-model="display.isEmploymentLabel" :clearable="false" placeholder="请选择是否就业" type="number"
				disabled @click="showIsEmployment = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">是否创业</view>
			<u-input class="content-input" v-model="display.isCyLabel" :clearable="false" placeholder="请选择是否创业" type="number"
				disabled @click="showIsCy = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">是否为学生</view>
			<u-input class="content-input" v-model="display.isStudentLabel" :clearable="false" placeholder="请选择是否为学生" type="number"
				disabled @click="showIsStudent = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">是否特困家庭</view>
			<u-input class="content-input" v-model="display.difficultyLabel" :clearable="false" placeholder="请选择是否特困家庭" type="number"
				disabled @click="showDifficulty = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		<view class="content">
			<view class="content_text">是否困境儿童</view>
			<u-input class="content-input" v-model="display.dilemmaChildrenLabel" :clearable="false" placeholder="请选择是否困境儿童" type="number"
				disabled @click="showDilemmaChildren = true" />
			<view class='right'>
				<image src='../../static/right.png'></image>
			</view>
		</view>
		
		<view v-if="editEnable" class="open_invoice" @click="submit">
			<text>提交</text>
		</view>
		<u-picker mode="time" v-model="showBirthday" @confirm="selectBirthday"></u-picker>
		<u-picker mode="time" v-model="showTime" @confirm="selectTime"></u-picker>
		
		<u-select v-model="showGender" :list="listGenders" @confirm="selectGender"></u-select>
		<u-select v-model="showIdnoType" :list="listIdnoTypes" @confirm="selectIdnoType"></u-select>
		<u-select v-model="showNativePlace" :list="listNatives" @confirm="selectNativePlace"></u-select>
		<u-select v-model="showNation" :list="listNations" @confirm="selectNation"></u-select>
		<u-select v-model="showRelation" :list="listRelations" @confirm="selectRelation"></u-select>
		<u-select v-model="showEdu" :list="listEdus" @confirm="selectEdu"></u-select>
		<u-select v-model="showOccupation" :list="listOccupations" @confirm="selectOccupation"></u-select>
		<u-select v-model="showHealthyStatus" :list="listHealthyStatus" @confirm="selectHealthyStatus"></u-select>
		<u-select v-model="showPoliticsoutLook" :list="listPoliticsoutLook" @confirm="selectPoliticsoutLook"></u-select>
		<u-select v-model="showIsAllowance" :list="listStatus" @confirm="selectIsAllowance"></u-select>
		<u-select v-model="showIsInsurance" :list="listStatus" @confirm="selectIsInsurance"></u-select>
		<u-select v-model="showIsEmployment" :list="listStatus" @confirm="selectIsEmployment"></u-select>
		<u-select v-model="showIsCy" :list="listStatus" @confirm="selectIsCy"></u-select>
		<u-select v-model="showIsStudent" :list="listStatus" @confirm="selectIsStudent"></u-select>
		<u-select v-model="showDifficulty" :list="listStatus" @confirm="selectDifficulty"></u-select>
		<u-select v-model="showDilemmaChildren" :list="listStatus" @confirm="selectDilemmaChildren"></u-select>
		
		
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import common from '../../common/common.js'
	export default {
		data() {
			return {
				dictValue: common.dictValue,
				createEnable: false,
				editEnable: true,
				showTime: false,
				showBirthday:false,
				showNativePlace: false,
				showIdnoType: false,
				showNation: false,
				showGender:false,				
				showRelation: false,			
				showEdu: false,
				showOccupation: false,
				showHealthyStatus: false,//健康状态
				showPoliticsoutLook: false,//政治面貌
				showIsAllowance: false,//是否享受低保
				showIsInsurance: false,//是否参加保险
				showIsEmployment: false,//是否就业
				showIsCy: false,//是否创业
				showIsStudent: false,//是否为学生
				showDifficulty:false,//是否为特困家庭
				showDilemmaChildren: false,//是否为困境儿童
				
				form:{family_id:"",}, //表单的值
				display:{},//表单中需要转换的值的label
				listStatus: this.formatDictValueToList(common.dictValue, "is_status"),
				listNatives: this.formatDictValueToList(common.dictValue, "nativeplace"),
				listGenders:this.formatDictValueToList(common.dictValue, "gender"),
				listIdnoTypes:this.formatDictValueToList(common.dictValue, "idnotype"),
				listNations:this.formatDictValueToList(common.dictValue, "nation"),
				listRelations:this.formatDictValueToList(common.dictValue, "relation"),
				listEdus:this.formatDictValueToList(common.dictValue, "edu"),
				listOccupations:this.formatDictValueToList(common.dictValue, "occupation"),
				listHealthyStatus:this.formatDictValueToList(common.dictValue, "healthystatus"),
				listPoliticsoutLook:this.formatDictValueToList(common.dictValue, "politicsoutlook"),
				
				
			}
		},
		onLoad(options) {
			console.log(options);
			if(options && options.item){
				options.item = decodeURIComponent(options.item);
				this.form.family_id = options.family_id;
			}
			if(options.item=="0"){
				this.createEnable = true;
			}
			if(options && options.item && options.item!="0"){	
				this.editEnable = options.t=="edit"?true:false;
				this.form = JSON.parse(options.item);
				this.display = this.getValueLabels(common.dictValue, this.form);
				console.log(this.display);
			}
			if(options.t == "edit"){
				this.editEnable = true;
			}
		},
		methods: {
			getValueLabels(dictValue, values) {
				return {
					"genderLabel": dictValue.gender[values.gender],
					"idnoTypeLabel": dictValue.idnotype[values.idno_type],
					"nativePlaceLabel": dictValue.nativeplace[values.native_place],
					"nationLabel": dictValue.nation[values.nation],
					"relationLabel": dictValue.relation[values.relation],
					"eduLabel": dictValue.edu[values.edu],
					"occupationLabel": dictValue.occupation[values.occupation],
					"healthyStatusLabel": dictValue.healthystatus[values.healthy_status],
					"politicsoutLookLabel": dictValue.politicsoutlook[values.politics_outlook],
					"isAllowanceLabel": dictValue.is_status[values.is_allowance],
					"isInsuranceLabel": dictValue.is_status[values.is_insurance],
					"isEmploymentLabel": dictValue.is_status[values.is_employment],
					"isCyLabel": dictValue.is_status[values.is_cy],
					"isStudentLabel": dictValue.is_status[values.is_student],
					"difficultyLabel": dictValue.is_status[values.difficulty],
					"dilemmaChildrenLabel": dictValue.is_status[values.dilemma_children],
				};
			},
			submit() {
								
				var that = this;
				if(this.checkForm()){
					var cookie =  uni.getStorageSync('cookie');
					uni.showLoading({"title":"数据提交中..."});
					//新增API地址
					var url = url = this.$common.baseUrl + 'api/data/editFamilyMember';
					if(that.createEnable){						
						this.$common.baseUrl + 'api/data/addFamilyMember'; //修改API地址
					}
					uni.request({
						url: url,
						header: {'content-type': 'application/x-www-form-urlencoded','cookie':cookie},					
						data: that.form,
						method: 'POST',
						success: res => {
							uni.hideLoading();
							if (res.data.code == 1) {
								uni.showToast({title: '操作成功',duration: 2000})
								uni.navigateTo({
									url:'/pages/category/details?id='+that.form.family_id
								})
							}
						},
						fail: err => {uni.hideLoading();}
					})					
				}
				
			},
			
			checkForm(){
				if (!this.form.name) {
					this.$refs.uTips.show({title: '请填写姓名',type: 'error',duration: '2000'})
					return false;
				}
				return true;
			},
			
			selectBirthday(e) {
				this.form.birthday = e.year+"年"+e.month+"月"+e.day+"日"
				console.log(e)
			},
			selectGender(e){
				this.form.gender = e[0].value
				this.display.genderLabel = e[0].label
			},
			selectIdnoType(e){
				this.form.idno_type = e[0].value
				this.display.idnoTypeLabel = e[0].label
			},			
			selectNativePlace(e){
				this.form.native_place = e[0].value
				this.display.nativePlaceLabel = e[0].label
			},		
			selectOccupation(e){
				this.form.occupation = e[0].value
				this.display.occupationLabel = e[0].label
			},
			selectNation(e){
				this.form.nation = e[0].value
				this.display.nationLabel = e[0].label
			},
			selectRelation(e){
				this.form.relation = e[0].value
				this.display.relationLabel = e[0].label
			},
			selectEdu(e){
				this.form.edu = e[0].value
				this.display.eduLabel = e[0].label
			},
			selectHealthyStatus(e){
				this.form.healthy_status = e[0].value
				this.display.healthyStatusLabel = e[0].label
			},			
			selectPoliticsoutLook(e){
				this.form.politics_outlook = e[0].value
				this.display.politicsoutLookLabel = e[0].label
			},
			selectIsAllowance(e){
				this.form.is_allowance = e[0].value
				this.display.isAllowanceLabel = e[0].label
			},
			selectIsInsurance(e){
				this.form.is_insurance = e[0].value
				this.display.isInsuranceLabel = e[0].label
			},
			selectIsEmployment(e){
				this.form.is_employment = e[0].value
				this.display.isEmploymentLabel = e[0].label
			},
			selectIsCy(e){
				this.form.is_cy = e[0].value
				this.display.isCyLabel = e[0].label
			},
			selectIsStudent(e){
				this.form.is_student = e[0].value
				this.display.isStudentLabel = e[0].label
			},
			selectDifficulty(e){
				this.form.difficulty = e[0].value
				this.display.difficultyLabel = e[0].label
			},
			selectDilemmaChildren(e){
				this.form.dilemma_children = e[0].value
				this.display.dilemmaChildrenLabel = e[0].label
			},			
			selectTime(e) {
				this.form.time = e.year + '-' + e.month + '-' + e.day
				this.form.birthday = e.year+"年"+e.month+"月"+e.day+"日"
				console.log(e)
			},
			
			formatDictValueToList(dictValue, item){
				var res = [];
				for(var key in dictValue[item]){
					res.push({value:key, label:dictValue[item][key]});
				}
				return res;
			}
		}
	}
</script>

<style scoped>
	.model-border{display: flex;align-items: center;}
	.title {
		height: 40rpx;
		width: 10rpx;
		background-color: #68B92E;
		margin: 20rpx 0 20rpx 20rpx;
	}

	.icon-title {
		display: block;
		line-height: 100rpx;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.content {
		width: 95%;
		height: 80rpx;
		margin: 0 auto;
		background-color: #F7F7F7;
		border-radius: 15rpx;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.content_text {
		font-size: 26rpx;
		letter-spacing: 2rpx;
		margin-left: 30rpx;
		width: 200rpx;
	}

	.right {
		width: 50rpx;
	}

	.right image {
		width: 30rpx;
		height: 30rpx;
	}

	>>>.u-input {
		border: none !important;
	}

	.content-input {
		flex: 1 !important;
	}

	.open_invoice {
		width: 400rpx;
		height: 90rpx;
		background-color: #68B92E;
		text-align: center;
		border-radius: 15rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.open_invoice text {
		font-size: 25rpx;
		font-family: Source Han Serif CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 20rpx;
		display: block;
	}
</style>

